<template>
  <div class="myclass">
    <box-border title-button="已约课程" />
    <div class="myclass-search">
      <el-form
        ref="form"
        size="medium"
        label-position="right"
        class="myclass-search-form"
        :model="formSearch"
        label-width="200px"
        :inline="true"
      >
        <el-form-item label="时间查询：">
          <el-date-picker
            v-model="formSearch.dateVal"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          /></el-form-item>

        <el-form-item label="课程/老师名：" :inline-message="true">
          <div class="myclass-search-input">
            <input v-model="formSearch.inputVal">
            <el-button
              style="float: right; padding-right: 30px;height:40px"
              type="primary"
              icon="el-icon-search"
              size="medium"
              @click="handleSearch"
            >搜索</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="myclass-table">
      <el-table
        :data="userClassList"
        :border="true"
        style="width: 100%"
        :lazy="true"
        :header-cell-style="changHeaderStyle"
      >
        <el-table-column
          prop="class_id"
          label="课程单号"
          width="width"
          align="center"
        />
        <el-table-column
          label="上课时间"
          width="width"
          sortable
          align="center"
        >
          <template slot-scope="scoper">
            <div>
              <div>{{ scoper.row.timeMou }}</div>
              <div>{{ scoper.row.timeHour }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="currentname"
          label="课程名称"
          width="width"
          align="center"
        />
        <el-table-column
          label="老师"
          width="width"
          align="center"
        >
          <template v-if="scope.row.teacherinfo" slot-scope="scope">
            <div class="form-img">
              <img :src="scope.row.teacherinfo.picture" alt="">
              <div class="form-img-text">{{ scope.row.teacherinfo.nickName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="老师信息"
          width="width"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.teacherinfo" class="form-text">
              <div>老师工号：{{ scope.row.teacherinfo.id }}</div>
              <div>老师手机：{{ scope.row.teacherinfo.mobile }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="上课方式"
          width="width"
          align="center"
        >
          <template slot-scope="scope">
            <a v-if="!scope.row.isBeginClass" title="只能提前5分钟进入课堂">
              <el-button type="primary" disabled>进入{{ scope.row.tool }}课堂</el-button>
            </a>
            <div v-else>
              <el-button type="primary">进入{{ scope.row.tool }}课堂</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="课程状态"
          width="width"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              <el-tag :hit="true">{{ scope.row.state }}</el-tag>
            </div>
            <div class="classState-text" @click="handleCancelClass(scope.row.class_id)">取消课程</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="myclass-pagination">

      <el-pagination
        :current-page="currentPage"
        :page-sizes="[2,4,6,10]"
        :page-size="limit"
        layout="prev, pager, next, jumper,->,total, sizes"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1,
      limit: 4,
      total: 0,
      userClassList: [],
      formSearch: {
        dateVal: [],
        inputVal: ''
      },
      timeOut1: '',
      timeOut2: ''
    }
  },
  mounted() {
    this.getUserBookClassList()
    // 子调用一次
    setTimeout(() => {
      this.userClassList.forEach(item => {
        console.log('setTimeout')
        this.messageBox(item)
      })
    }, 2000)
    // clearInterval(time)
    // 相隔5分钟一次弹窗
    this.timeOut2 = setInterval(() => {
      console.log('setInterval')
      this.userClassList.forEach(item => {
        this.messageBox(item)
      })
    }, 300000)
    this.timeOut1 = setInterval(() => {
      let currentTimeNum = Date.parse(new Date())
      currentTimeNum = Date.parse(new Date())
      this.userClassList.forEach(item => {
        if (item.timeNum - currentTimeNum <= 300000) {
          item.isBeginClass = true
        }
      })
    }, 1000)
  },
  destroyed() {
    clearTimeout(this.timeOut1)
  },
  methods: {
    // 获取用户已约课程
    async getUserBookClassList() {
      const { currentPage: page, limit: size } = this
      // eslint-disable-next-line prefer-const
      let { dateVal, inputVal } = this.formSearch
      dateVal = dateVal || []
      const result = await this.$API.classAPI.getUserBookClassList({
        page,
        size,
        currentname: inputVal,
        start_time: dateVal[0] || '',
        last_time: dateVal[1] || ''
      })
      result.data.rows.forEach(item => {
        item.isBeginClass = false
        item.timeNum = this.$dayjs(item.start_time).valueOf()
        item.timeMou = this.$dayjs(item.start_time).format('YYYY-MM-DD')
        item.timeHour = this.$dayjs(item.start_time).format('H:mm:ss')
      })
      this.userClassList = result.data.rows
      this.total = result.data.count
    },
    changHeaderStyle({ rowIndex }) {
      if (rowIndex === 0) {
        return 'background:rgb(246,231,181)'
      }
    },
    handleSearch() {
      this.getUserBookClassList()
    },
    handleSizeChange(limit) {
      this.limit = limit
      this.getUserBookClassList()
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.getUserBookClassList()
    },
    // 弹窗
    messageBox(item) {
      if (item.isBeginClass) {
        this.$confirm(`${item.currentname}马上要上课了`, {
          confirmButtonText: '进入课堂',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '腾讯课堂号是123213213'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '开进来把!老师等你很久了'
          })
        })
      }
    },
    handleCancelClass(classId) {
      this.$confirm(`是否要删除这个课程`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        lockScroll: 'true',
        type: 'warning'
      }).then(async() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        await this.$API.classAPI.cancelClass(classId)
        this.getUserBookClassList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.myclass{

}
.myclass-search{
  margin: 80px auto 40px;
  text-align:center;
  input{
  border: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 300px;
    margin-right: 3px;
}
  }

.myclass-pagination{
  margin: 80px 0;
  text-align: center;
}
.form-img{
  margin: 5px 0;
  width: 100%;
  height: 150px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  img{
    display: block;
    // text-align: center;
    margin: 0 auto;
    width: 100%;
    border-radius: 10px;
    height: 100px;
    box-shadow:  0 0 5px rgba(0, 0, 0,0.3);
  }
  &-text{
    margin-top:10px;
  }
}
.form-text{
  padding: 20px 0;
}
a{
  font-size: 15px;
  border-radius: 6px;
}
.classState-text{
  color: #606266;
  font-size: 10px;
  margin-top:15px;
  cursor: pointer;
}
</style>
